@import "variable-cloud";                 
                   
body,div,dl,dt,dd,menu,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td { margin:0; padding:0; }
body { background:#ecf0f1; color:#555; font-size:14px; font-family: Verdana, Arial, Helvetica, sans-serif; }
td,th,caption { font-size:14px; }
h1, h2, h3, h4, h5, h6 { font-weight:normal; font-size:100%; }
address, caption, cite, code, dfn, em, strong, th, var { font-style:normal; font-weight:normal;}
a { color:#555; text-decoration:none; }
a:hover { text-decoration:none; }
img { border:none; }
ol,ul,li { list-style:none; }
input, textarea, select, button { font:14px Verdana,Helvetica,Arial,sans-serif; } 
table { border-collapse:collapse; }
*{outline: none;}   

body{background: @pageBg}
/* css common */ 
.clearfix:after {content: "."; display: block; height:0; clear:both; visibility: hidden;}
.clearfix { *zoom:1; }
.hb-container{position: fixed;top: 0;left: 0;width: @pageContainerWidth;height: @pageContainerWidth}
.hb-padding{padding: @pagePadding;box-sizing: border-box;}       
.hb-page{width: @pageContainerWidth;height: @pageContainerWidth;background: @pageContainerBg;position: relative;overflow: hidden;
	.hb-page-top{position: absolute;top: 0;left: 0;width: @pageContainerWidth;height: @pageTopHeight;border: @pageTopBorder;background: @pageTopBg;z-index: 999;box-sizing: border-box;padding:0 @pagePadding;
		.hb-page-top-title{width: @pageContainerWidth;line-height: @pageTopHeight}
	}
	.hb-page-left{position: absolute;left: 0;width: @pageLeftWeight;border-right:@pageLeftBorder;background: @pageLeftBg;z-index: 100;box-sizing: border-box;padding:@pagePadding;}
	.hb-page-right{position: absolute;top: 0;right: 0;height: @pageContainerHeight;width: @pageRightWeight;border:@pageRightBorder;background: @pageRightBg;z-index: 100;box-sizing: border-box;}
	.hb-page-bottom{position: absolute;bottom: 0;left: 0;width: @pageContainerWidth;height: @pageBottomHeight;border: @pageBottomBorder;background: @pageBottomBg;z-index: 999;box-sizing: border-box;}
	.hb-page-center{position: absolute;background: @pageCenterBg;box-sizing: border-box;padding: @pagePadding}
}
.hb-mask{position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgba(25,25,25,0.3);z-index: 9999999}
.hb-toor{
	tr{
		td{padding-right: 15px;}
	}
}  

// .ztree{height: 100%;overflow: auto;}
// .layui-form{padding: @pagePadding}

.layui-table, .layui-table-view{margin: 0}
.layui-layer-content{padding: @pagePadding;box-sizing: border-box;}
   
  
  
/* css layout*/
nav{position: fixed;top: 0;left: 0;background: @navBg;width: @pageContainerWidth;height: @navHeight;padding-left: @menuWidth;box-sizing: border-box;z-index: 999;
	ul{float: right;
        li{float: left;box-sizing: border-box;padding: 0 @pagePadding;cursor: pointer;position: relative;transition:0.5s;
            h1{line-height: @navHeight;font-size: 12px;color: @navColor;
                img{height: @navIconHeight;float: left;margin-top:((@navHeight)-(@navIconHeight))/2	;margin-right:  @pagePadding;}
            }
        }  
       
    }  
}

crumbs{width: @pageContainerWidth;height: @crumbsHeight;position: fixed;top: @navHeight;left: 0;background: @crumbsBg;border-top: @crumbsBorderT;border-bottom: @crumbsBorderB;box-shadow: @crumbsShadow;padding-left: @menuWidth;box-sizing: border-box;
	prev,next,crumbsAll,crumbsitem{float: left;padding: 0 @pagePadding*2;cursor: pointer;border-right:@crumbsDetailBorderL;transition:  1s;position: relative;background: @crumbsDetailBg;
		h1{line-height: 37px;font-size: 12px;color: @crumbsDetailColor;
			span{margin-left: 5px;}
		}
		ol{overflow: hidden;width: 9em;position: absolute;top: (@navHeight)-2;right: 0;background: @crumbsDetailActiveBg;
			li{padding: 0 @pagePadding;box-sizing: border-box;border-bottom: 1px solid rgba(255,255,255,0.1);
				h2{color: @crumbsDetailActiveColor;line-height: @navHeight;font-size: 12px;}
			}

		}  
	}
	crumbsitem:hover{background: @crumbsDetailHoverBg;transition: 1s;
		h1{color: @crumbsDetailHoverColor}
	};
	.active{background: @crumbsDetailActiveBg;
		h1{color: @crumbsDetailActiveColor}
	}
	.active:hover{background: @crumbsDetailActiveBg;
		
	}
	.pre:hover{background: none}
	.next:hover{background: none}
	.all:hover{background: none} 
	theme{float: right;height: 40px;margin-right: 15px;
		themeItem{width: 20px;height: 20px;background: #fff;float: left;margin:10px;}
		themeItem:nth-child(1){background: #2ecc71}
		themeItem:nth-child(2){background: #f1c40f}
		themeItem:nth-child(3){background: #8e44ad}
		themeItem:nth-child(4){background: #3498db}
		themeItem:nth-child(5){background: #f5f3e4}
		themeItem:nth-child(6){background: #34495e}
	}
}


menu{width: @menuWidth;height:@pageContainerWidth;position: fixed;top: 0;left: 0;background: @menuBg;z-index: 99999;
	.logo{width: 100%;height: @navHeight*2;border-bottom:@logoBorderB;box-sizing: border-box;background-repeat: no-repeat;background-position: center;background-image: @logoImg;background-size: 80% auto;background-color: @logoBg;border-right: @logoBorderR;overflow: hidden;}
    .title{width: @pageContainerWidth;padding: 0 @pagePadding;box-sizing: border-box;;background: @menuTitleBg;border-bottom: 1px solid @menuTitleBorderB;cursor: pointer;
		h1{line-height: 40px;color:@menuTitleColor;
			span{margin-right: 5px;}
			}
		}
		ul{width: 100%;transition: 1s;transition: 1s;
			li{width: 100%;position: relative;background: @menuDetailBg;
				h2{color: @menuDetailColor;line-height: 40px;padding: 0 @pagePadding*2;box-sizing: border-box;cursor: pointer;
					span{margin-right: 5px;}
				i{float: right;line-height: 40px;}
			}
			h2:hover{background:@menuDetailActiveBg;color: @menuDetailActiveColor}
 
			.active{background: @menuDetailActiveBg;color: @menuDetailActiveColor}
			.active:hover{background: @menuDetailActiveBg}
		}
	}
}
main{width: @pageContainerWidth;height: @pageContainerHeight;position: fixed;top: 0;left: 0;padding-top: @navHeight+@crumbsHeight;padding-left: @menuWidth;box-sizing: border-box;z-index: -1;
	iframe{width: @pageContainerWidth;height: @pageContainerHeight;border: none;border-left: @mainBorderL;box-sizing: border-box;}
}

/* css systemSelect */
.systemModel{width: @pageContainerWidth/5;padding: @pagePadding/2;float: left;box-sizing: border-box;
    .modelMain{width: 100%;height: @systemModelHeight;background: @systemModelBg;
        .info{width: 100%;height: @systemModelHeight/2;overflow: hidden;
            .logo{float: left;height: 100%;float: left;width: @systemModelHeight/2;height: @systemModelHeight/2;padding: 12.5px;box-sizing: border-box;
                img{height: @pageContainerHeight;width: @pageContainerWidth;}
            }
            h1{margin-top: 15px;font-weight: bolder;}
            h2{font-size: 12px;color: #bdc3c7;line-height: 30px;}
        }
        .text{width: 100%;padding: 0 15px;box-sizing: border-box;
            p{height: 4em;overflow: hidden;color: #95a5a6;text-align: justify;}
        }
    }
    .modelMain:hover{
        box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1);cursor: pointer;
    }
}

.systemMenu{width: 100%;
    li{width: 100%;padding: 0 @pagePadding;box-sizing: border-box;transition: 1s;
        h1{line-height: 40px;color: #fff;
            img{display: inline;height: 20px;}
        }
    }
    li:hover{background: @menuActiveBg;cursor: pointer;transition: 1s}
    .active{background: @menuActiveBg;cursor: pointer;transition: 1s}
}

/* css login */
.loginBg{background: @loginBgImg;background-size: @loginBgSize}
.loginOut{width: @pageContainerWidth;height: @pageContainerHeight;
	.left{width: 50%;height: 100%;float: left;
		.text{width: 100%; position: relative;top: 50%;transform: translateY(-50%);
			h1{font-size: 32px;color: #fff;text-align: right;font-weight: bolder;text-shadow: 0px 2px 3px #555;letter-spacing: 10px;}
			h2{text-align: right;color: #fff;text-shadow: 0px 2px 3px #555;line-height: 30px;letter-spacing: 4px}
		}
	}
	.right{width: 50%;height: 100%;float: left;
		.rightMain{width: 400px;margin: 0 auto;position: relative;top: 50%;transform: translateY(-50%);border-radius: 5px;overflow: hidden;box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3);
			.title{width: 100%;background:@loginTitleBg;padding: 0 15px;box-sizing: border-box;
				h1{line-height: 40px;color: @loginTitleColor;font-weight: bolder;}
			}
			.main{width: 100%;background: #fff;overflow: hidden;padding-bottom: 45px;
				.inputGroup{width: 100%;padding: 7.5px 15px;box-sizing: border-box;position: relative;
					input{width: 100%;height: 40px;border-radius: 3px;border: 1px solid @loginFormInputBorderColor;padding-left: 5em;box-sizing: border-box;}
					input::-webkit-input-placeholder{font-size: 12px;}
					h1{width: 6em;position: absolute;top: 7.5px;left: 0;text-align: right;line-height: 40px;font-size: 12px;}
					img{position: absolute;top: 7.5px;right: 15px;height: 40px;cursor: pointer;}
				}
				.code{padding-right: 12em;}
				.btnOut{width: 100%;padding: 0 15px;box-sizing: border-box;margin-top: 20px;
					button{width: 100%;height: 40px;background: @loginSubBtnBg;border: none;border-radius: 5px;color: @loginSubBtnColor}
				}
				.logo{height: 50px;display: block;margin: 0px auto;margin-top: 15px}
				h2{text-align: center;font-size: 12px;line-height: 50px;}
			}
		}
	}
}